import React, { Component } from 'react'
import { AtTabBar } from 'taro-ui';
import { View, Text, ScrollView, Swiper, SwiperItem, Image, Input } from '@tarojs/components';
import Taro from '@tarojs/taro';
import './index.scss';


export default class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: props.value,
      tempValue: '',
      showInput: false,
      hintList: [
        { name: '郑州市', address: '河南省-郑州市' },
        { name: '郑州东站', address: '郑州市-金水区-xxxx 号' },
        { name: '郑州东站', address: '郑州市-金水区-xxxx 号' },
        { name: '郑州东站', address: '郑州市-金水区-xxxx 号' },
        { name: '郑州东站', address: '郑州市-金水区-xxxx 号' },
        { name: '郑州东站', address: '郑州市-金水区-xxxx 号' },
        { name: '郑州东站', address: '郑州市-金水区-xxxx 号' },
        { name: '郑州东站', address: '郑州市-金水区-xxxx 号' },
      ]
    }
  }

  componentWillMount () { }
  componentDidMount () { }
  componentWillUnmount () { }
  componentDidShow () { }
  componentDidHide () { }
  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.value !== this.state.value) {
      this.setState({ value: nextProps.value })
    }
  }

  onInput(e) {
    clearTimeout(this.timer);
    const value = e.detail.value;
    this.timer = setTimeout(() => {
      this.setState({ tempValue: value });
      // 获取输入建议
      Taro.request({
        url: `https://api.map.baidu.com/place/v2/suggestion?query=${value}&region=全国&city_limit=false&output=json&ak=cG2ZmH1O3V4sVMknx95sINeGuWCVfqvf`,
        method: 'GET',
        header: {
          'content-type': 'application/json' // 默认值
        },
        success: (res) => {
          if (!res.data || !res.data.result) return;
          this.setState({ hintList: res.data.result })
        }
      })
    }, 320)
  }
  // 点击输入框弹出输入内容
  onShow() {
    this.setState({ showInput: true, tempValue: this.state.value });
  }
  onCancel() {
    this.setState({ showInput: false, tempValue: '' });
  }
  onSelect(item) {
    this.setState({ tempValue: '', value: item.name, showInput: false });
    this.props.onInput && this.props.onInput.call(this, item.name);
    this.props.onChange && this.props.onChange.call(this, item.name);
  }

  render () {
    const { value, tempValue, showInput, hintList } = this.state;
    const { placeholder, name, className } = this.props;
    return (
      <View className={`self-input ${className}`}>
        <View className="show" onClick={this.onShow.bind(this)}>
          {value ? value : <Text className="placeholder">{placeholder}</Text>}
        </View>
        {
          showInput && <View className="insert">
            <View className="input">
              <Input
                name={name}
                value={tempValue}
                placeholder={placeholder}
                className="input-item"
                focus
                onInput={this.onInput.bind(this)}
              />
              <Text className="cancel" onClick={this.onCancel.bind(this)}>取消</Text>
            </View>
            <ScrollView
              className="suggest"
              scrollY
              scrollWithAnimation
            >
              <View className="suggest-item" onClick={() => this.onSelect({ name: '' })}>
                <View className="title">清除内容</View>
              </View>
              {
                tempValue && <View className="suggest-item" onClick={() => this.onSelect({ name: tempValue })}>
                  <View className="title">{tempValue}</View>
                </View>
              }
              {
                hintList.map(item => <View className="suggest-item" onClick={() => this.onSelect(item)}>
                  <View className="title">{item.name}</View>
                  <View className="address">{item.address}</View>
                </View>)
              }
            </ScrollView>
          </View>
        }
      </View>
    )
  }
}
